<template>
  <div>
    <div class="type-row">
      <text class="type-text text-muted">品种</text>
      <text class="type-text text-muted">单位保额</text>
      <text class="type-text text-muted">保费费率</text>
      <text class="type-text text-muted">自缴比率</text>
    </div>

    <list ref="list"
          v-if="totalPages"
          :showRefresh="true"
          :showLoadMore="showLoadMore"
          @refresh="refresh"
          @loadMore="loadmore"
          loadmoreoffset="200">
      <cell v-for="(item, index) in data"
            :key="index"
            @click="goDetail(item)">
        <div class="type-row">
          <text class="type-text">{{item.ins_class_name}}</text>
          <text class="type-text">{{item.ins_amount}}</text>
          <text class="type-text">{{item.ins_fee}}</text>
          <text class="type-text">{{item.self_fee_rate}}%</text>
          <text class="icon type-icon">&#xe6a2;</text>
        </div>
      </cell>
    </list>
    <vm-status v-else
               :type="statusType"></vm-status>
  </div>
</template>
<script>
import VmButton from '../../components/vm-button.vue'
import VmStatus from '../../components/vm-status.vue'
import {
  STORAGE_FARM
} from '../../plugins/constant'

export default {
  components: { VmButton, VmStatus },
  props: {},
  data() {
    return {
      data: [],
      params: {
        index: 1,
        size: 10,
        'customer_id.eq': '',
        'insurance_order_no.neq': ''
      },
      totalPages: 2
    }
  },
  computed: {
    showLoadMore() {
      return this.totalPages > this.params.index
    },
    statusType() {
      return this.totalPages === -1 ? 'error' : 'empty'
    }
  },
  watch: {},
  created() {
    this.refresh()
  },
  methods: {
    refresh() {
      this.params.index = 1
      this.getInsurance().then(res => {
        this.data = res
      })
    },
    loadmore() {
      this.getInsurance().then(res => {
        this.data.push(...res)
      })
    },
    getInsurance() {
      return new Promise((resolve, reject) => {
        this.$api.getData({
          server: 'insurance',
          table: 'insurance_class',
          params: {
            index: 1,
            size: 30
          },
          order: {
            ins_year: 'desc'
          },
          errorMsg: '获取农除政策失败！'
        }).then(res => {
          this.params.index++
          this.totalPages = res && res.totalPages || 0
          const data = res && res.data || []
          resolve(data)
        }).catch(err => {
          this.totalPages = -1
        }).then(() => {
          const ref = this.$refs["list"]
          ref.refreshEnd()
          ref.loadMoreEnd()
        })
      })
    },
    goDetail(row) {
      this.$nav.open({
        name: 'serve.insurance.class.detail',
        params: row
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.icon {
  font-family: alicon;
}
.p-3 {
  padding: 30px;
}
.bg-white {
  background-color: #fff;
}
.border-bottom {
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}
.text-muted {
  color: #999;
}
.type-row {
  flex-direction: row;
  background-color: #fff;
  justify-content: center;
  border-bottom-width: 1px;
  border-bottom-color: $border-color-light;
}
.type-text {
  flex: 1;
  font-size: 28px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}
.type-icon {
  color: #999;
  font-size: 24px;
  position: absolute;
  right: 10px;
  top: 25px;
}
</style>
